<template>
  <section class="app-inner">
    <div class="inner-left">
      <el-form :model="formBuild" class="demo-form-inline" size="small">
        <el-form-item>
          <el-date-picker
            v-model="rwoNumberTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:240px"
            @change="handleDateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formBuild.build" placeholder="请选择楼栋" style="width:240px" @change="handleBuildChange">
            <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <device-tree
            ref="deviceTree"
            :rwoNumberTime="rwoNumberTime"
            :activebuildIndex="activebuildIndex"
            :activeFloorName="activeFloorName"
            @rwoNumberClick="rwoNumberClick"
          ></device-tree>
        </el-form-item>
      </el-form>
    </div>
    <div class="inner-right">
      <div v-if="this.videoPopShow">
        <div class="deviceInfo">
          <div class="table-title">工单基础信息</div>
          <table class="device-table">
            <colgroup>
              <col style="width:1.2rem" />
              <col style="width:2.2rem" />
            </colgroup>
            <tr>
              <td>工单编号</td>
              <td class="value-td">{{ rwoNumberInfo.rwoNumber }}</td>
            </tr>
            <tr>
              <td>报修人</td>
              <td class="value-td">{{ rwoNumberInfo.createName }}</td>
            </tr>
            <tr>
              <td>部门</td>
              <td class="value-td">{{ rwoNumberInfo.createDept }}</td>
            </tr>
            <tr>
              <td>报修人手机</td>
              <td class="value-td">{{ rwoNumberInfo.createTel }}</td>
            </tr>
            <tr>
              <td>报修类型</td>
              <td class="value-td">{{ rwoNumberInfo.repairTypeName }}</td>
            </tr>
            <tr>
              <td>报修内容</td>
              <td class="value-td">{{ rwoNumberInfo.repairContent }}</td>
            </tr>
            <tr>
              <td>紧急程度</td>
              <td class="value-td">{{ formatterUrgency(rwoNumberInfo.urgency) }}</td>
            </tr>
            <tr>
              <td>上报时间</td>
              <td class="value-td">{{ rwoNumberInfo.createTime }}</td>
            </tr>
            <tr>
              <td style="vertical-align:top">报修图片</td>
              <td class="value-td">
                <viewer :images="rwoNumberInfo.repairPicUrl" style="float:right;padding:1px 0">
                  <img
                    v-for="src in rwoNumberInfo.repairPicUrl"
                    :key="src"
                    :src="src"
                    class="img-over"
                    style="width: 40px;height: 40px;float:left;cursor: pointer;"
                  />
                </viewer>
              </td>
            </tr>
            <tr>
              <td>状态</td>
              <td class="value-td">{{ rwoNumberInfo.status }}</td>
            </tr>
          </table>

          <!-- <span class="handleRwoNumberClick" v-if="scope.row.status === '待处理'">立即处理</span>
          <span class="handleRwoNumberClick" v-else-if="scope.row.status === '处理中'">立即处理</span> -->
        </div>
      </div>
    </div>
    <div class="floor-map-content">
      <div class="inner-center">
        <div class="activeFloor">
          <el-tabs v-model="activeFloorName" stretch @tab-click="tabFloor">
            <el-tab-pane v-for="item in floorList" :key="item.id" :label="item.name" :name="item.id + ''">
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="floor-map">
        <canvas class="floorMap" ref="floorMapRef" :width="mapWidth" :height="mapHeight"></canvas>
        <canvas class="floorMap floorMap2" ref="floorMapRef2" :width="mapWidth" :height="mapHeight"></canvas>
        <canvas class="floorMap floorMap3" ref="floorMapRef3" :width="mapWidth" :height="mapHeight"></canvas>
      </div>
    </div>
  </section>
</template>

<script>
import moment from 'moment'
import DeviceTree from './modules/DeviceTree'
import zrender from 'zrender'
// import { getEquipmentList } from '@/api/device'
import { floorData } from './js/floor'
import { deviceListHead, deviceMaintainHead, urgencyList } from './js/constants'
import { createBackground } from './js/canvas'
import { getListByTag } from '@/api/floor'
import { getWorkOrderInfoByRwoNumber } from './js/repair'

export default {
  name: 'List',
  data () {
    return {
      zr: '',
      zr2: '',
      zr3: '',
      mapWidth: 1272,
      mapHeight: 636,
      floorData: floorData,
      videoPopShow: false,
      deviceDetailShow: false,
      activebuildIndex: 0,
      activeFloorName: '0',
      deviceList: [],
      deviceListHead, // 基本信息表头
      deviceMaintainHead, // 维保表头
      formBuild: {
        build: ''
      },
      buildList: [],
      floorList: [],
      floorAreaList: [],
      roomList: [],
      activeSpotId: '',
      planEqptIds: [], // 下拉选择的轮播方案的设备列表
      checkRwoNumberList: [],
      CircleGroup: null,
      rwoNumberTime: [],
      rwoNumberInfo: {}
    }
  },
  components: {
    DeviceTree
  },
  computed: {
    checkedDevice () {
      let temp = []
      this.deviceListHead.forEach(item2 => {
        for (var key in this.device) {
          let tempObj = {
            key: '',
            value: ''
          }
          if (item2.value === key) {
            tempObj.key = item2.label
            tempObj.value = this.device[key]
            temp.push(tempObj)
          }
        }
      })
      return temp
    },
    checkedDeviceMaintain () {
      let temp = []
      this.deviceMaintainHead.forEach(item2 => {
        for (var key in this.device) {
          let tempObj = {
            key: '',
            value: ''
          }
          if (item2.value === key) {
            tempObj.key = item2.label
            tempObj.value = this.device[key]
            temp.push(tempObj)
          }
        }
      })
      return temp
    }
  },
  mounted () {
    this.getListByTag(0, 1, 'buildList')
  },
  watch: {
    'formBuild.build' (val) {
      if (val) {
        this.getListByTag(val, 2, 'floorList')
      }
    },
    rwoNumberTime (val) {
      if (val) {
        if (this.CircleGroup) {
          this.CircleGroup.removeAll()
          this.zr.add(this.CircleGroup)
        }
      }
    }
    // checkRwoNumberList(val) {
    //   if (val) {
    //     console.log(val)
    //     console.log(val.length)
    //   }
    // }
  },
  methods: {
    formatterUrgency (cellValue) {
      return this.$base.constFormatter(urgencyList, cellValue)
    },
    handleDateChange (val) {
      this.rwoNumberTime = [moment(val[0]).format('YYYY-MM-DD'), moment(val[1]).format('YYYY-MM-DD')]
    },
    handleBuildChange () {
      this.activebuildIndex = 0
      this.activeFloorName = '0'
    },
    // 设备选择回调
    rwoNumberClick (val) {
      this.checkRwoNumberList = val
      this.videoPopShow = false
      this.rwoNumberInfo = {}
      if (this.CircleGroup) {
        this.CircleGroup.removeAll()
        this.zr.add(this.CircleGroup)
      }
      this.creatSpot()
    },
    // 获取楼层信息
    async getListByTag (parentId, tag, arr) {
      const params = {
        parentId,
        tag
      }
      const { data } = await getListByTag(params)
      this[arr] = data
      // this[arr] = data
      if (tag === 1) {
        this.formBuild.build = data.length && data[0].id
      }
      if (tag === 2) {
        this.activeFloorName = data && data.length ? String(data[0].id) : '0'
        this.drawMap()
      }
    },
    // 获取工单信息
    async getWorkOrderInfoByRwoNumber (obj) {
      const params = {}
      let { data } = await getWorkOrderInfoByRwoNumber(obj.rwoNumberName, params)
      this.videoPopShow = true
      if (data.repairPicUrl) {
        data.repairPicUrl = data.repairPicUrl.split(';')
        for (let i = 0; i < data.repairPicUrl.length; i++) {
          if (data.repairPicUrl[i] === '') {
            data.repairPicUrl.splice(i, 1)
          }
        }
      }
      switch (data.status) {
        case 0:
          data.status = '待处理'
          break
        case 1:
          data.status = '处理中'
          break
        case 2:
          data.status = '已完成'
          break
      }
      this.rwoNumberInfo = data
    },
    tabFloor (obj) {
      this.deviceList = []
      this.activebuildIndex = Number(obj.index)
      this.drawMap()
      this.videoPopShow = false
    },
    // 选中设备
    deviceChecked () {},
    // 地图
    drawMap () {
      this.zr = zrender.init(this.$refs.floorMapRef)
      this.zr2 = zrender.init(this.$refs.floorMapRef2)
      this.zr3 = zrender.init(this.$refs.floorMapRef3)
      this.zr.clear()
      this.zr2.clear()
      this.zr3.clear()
      this.floorList.forEach((item, index, arr) => {
        if (this.activebuildIndex === index) {
          this.zr.add(createBackground(item.mapUrl, this.mapWidth, this.mapHeight))
          if (index > 0) {
            this.zr2.add(createBackground(arr[index - 1].mapUrl, this.mapWidth, this.mapHeight))
          }
          if (index > 1) {
            this.zr3.add(createBackground(arr[index - 2].mapUrl, this.mapWidth, this.mapHeight))
          }
        }
      })
    },
    // 创建当前楼层的巡更点
    creatSpot () {
      if (this.checkRwoNumberList.length) {
        this.CircleGroup = new zrender.Group({
          slient: true // 组内子孙元素是否响应鼠标事件
        })
        //  && e.level !== 1 && e.level
        this.checkRwoNumberList.forEach(e => {
          if (e.mapX && e.mapY) {
            if (e.level !== 1) {
              this.drawCircle(this.mapWidth * e.mapX, this.mapHeight * e.mapY, e)
            }
          }
        })
      }
    },
    // 绘制圆
    drawCircle (x, y, obj) {
      let circle = new zrender.Circle({
        shape: {
          cx: x,
          cy: y,
          r: 16
        },
        data: { spotId: obj.index },
        style: {
          // fill: this.getColor(obj),
          fill: '#1890ff',
          text: obj.rwoNumberId,
          fontSize: '12',
          textFill: '#ffffff'
        }
      })
      circle.on('click', () => {
        this.activeSpotId = obj.rwoNumberId
        this.getWorkOrderInfoByRwoNumber(obj)
      })
      this.CircleGroup.add(circle)
      this.zr.add(this.CircleGroup)
    },
    getColor (obj) {
      if (obj.eqptId === this.activeSpotId) {
        return '#409eff'
      }
      let colors = ['#67c23a', '#909399', '#f56c6c']
      return colors[obj.status - 1]
    },
    // // 视频弹窗显示
    // showVideoPop(item, e) {
    // },
    // 设备撒点
    creatDot () {},
    createPoints () {}
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  height: 100%;
  position: relative;
  .video-pop {
    position: absolute;
    z-index: 999;
  }
  .inner-left {
    width: 240px;
    float: left;
    position: absolute;
    z-index: 999;
  }
  /deep/ .el-tabs__item {
    color: #999999;
  }
  /deep/ .el-tabs__item.is-active {
    font-size: 0.18rem !important;
    color: #1989fa;
  }
  .inner-right {
    width: 3.4rem;
    height: 9.6rem;
    float: right;
    right: 0;
    position: absolute;
    z-index: 999;
    box-sizing: border-box;
    .deviceInfo {
      width: 100%;
      padding: 0.1rem;
      background: #ffffff;
      box-sizing: border-box;
      .detail-info {
        cursor: pointer;
        text-align: center;
        margin: 0.1rem auto;
        height: 30px;
        background: #f1f3f8;
        line-height: 30px;
        border-radius: 5px;
        color: #565682;
      }
      .table-title {
        text-align: center;
        margin-bottom: 0.1rem;
        height: 25px;
        background: #e6f1fc;
        border: 1px solid #a3d0fd;
        color: #2a71ed;
        line-height: 25px;
      }
      .device-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0.05rem auto;
        word-wrap: break-word;
        word-break: break-all;
        :last-child td {
          border: none;
        }
        tr {
          :last-child {
            text-align: right;
            color: #6f6f8c;
            width: 1.8rem;
          }
          td {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            font-size: 0.14rem;
            color: #9191af;
            height: 35px;
            line-height: 35px;
          }
        }
      }
    }
    .info-second {
      margin-top: 0.1rem;
    }
    /deep/ .vjs-big-play-button {
      font-size: 2em;
    }
  }
  // }
  .floor-map-content {
    width: 100%;
    height: 100%;
    .inner-center {
      // height: 100px;
      display: flex;
      // justify-content: center;
      align-items: center;
      flex-direction: column;
      .activeFloor {
        width: 5rem;
        margin-bottom: 0.4rem;
      }
    }
    .floor-map {
      width: 100%;
      height: 100%;
      position: relative;
      left: 50%;
      margin-left: -700px;
      .floorMap {
        // top: 1rem;
        position: absolute;
        z-index: 50;
        transform: perspective(50px) rotateX(1deg);
      }
      .floorMap2 {
        top: 1rem;
        z-index: 20;
        opacity: 0.5;
      }
      .floorMap3 {
        top: 1.7rem;
        z-index: 0;
        opacity: 0.1;
      }
    }
  }
  .handle-img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    margin: 8px;
    img {
      margin: 3px;
      cursor: pointer;
    }
  }
}
.handleRwoNumberClick {
  display: inline-block;
  background: #f1f3f8;
  height: 30px;
  line-height: 30px;
  color: #f8571e;
  width: 100%;
  text-align: center;
  cursor: pointer;
}
</style>
<style lang="scss">
.viewer-footer {
  display: none !important;
}
</style>
